<template>
  <div class="data-import">
    <button
      class="upload-btn"
      @click="triggerFileSelect"
      :disabled="isAnalyzing"
      :class="{ analyzing: isAnalyzing }">
      <span v-if="!isAnalyzing">
        📁 选择文件上传
      </span>
      <span v-else class="analyzing-content">
        <div class="loading-spinner"></div>
        <span>分析中...</span>
      </span>
    </button>
    <input
      type="file"
      ref="fileInput"
      @change="handleFileUpload"
      class="file-input"
      accept=".xlsx,.xls,.csv,.txt"
      multiple
    />
  </div>
</template>

<script>
export default {
  name: 'DataImport',
  data() {
    return {
      isAnalyzing: false
    }
  },
  methods: {
    triggerFileSelect() {
      this.$refs.fileInput.click()
    },

    async handleFileUpload(event) {
      const files = Array.from(event.target.files)

      if (files.length === 0) {
        return
      }

      try {
        // 这里可以添加实际的文件上传逻辑
        console.log('上传文件:', files)

        // 模拟上传延迟
        await new Promise(resolve => setTimeout(resolve, 500))

        // 触发父组件的上传成功事件
        this.$emit('upload-success', files)

        // 开始分析状态
        this.isAnalyzing = true

        // 模拟分析时间 (2-4秒随机)
        const analyzeTime = 2000 + Math.random() * 2000
        await new Promise(resolve => setTimeout(resolve, analyzeTime))

        // 分析完成后，触发数据更新动画
        this.isAnalyzing = false
        this.$emit('analysis-complete', {
          fileCount: files.length
        })

        // 清空文件输入
        this.$refs.fileInput.value = ''

      } catch (error) {
        console.error('上传失败:', error)
        this.$message.error('上传失败，请重试')
        this.isAnalyzing = false
        // 清空文件输入
        this.$refs.fileInput.value = ''
      }
    }
  }
}
</script>

<style scoped>
.data-import {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10px;
}

.upload-btn {
  width: 100%;
  padding: 12px 24px;
  background:
    linear-gradient(135deg,
      rgba(0, 100, 150, 0.8) 0%,
      rgba(0, 80, 120, 0.6) 100%
    );
  color: white;
  border: 1px solid rgba(0, 100, 150, 0.5);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 100, 150, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-btn:hover {
  background:
    linear-gradient(135deg,
      rgba(0, 120, 160, 0.9) 0%,
      rgba(0, 100, 140, 0.7) 100%
    );
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 100, 150, 0.4);
}

.file-input {
  display: none;
}

/* 分析中状态样式 */
.upload-btn.analyzing {
  background:
    linear-gradient(135deg,
      rgba(255, 165, 0, 0.8) 0%,
      rgba(255, 140, 0, 0.6) 100%
    );
  cursor: not-allowed;
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

.analyzing-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-import {
    padding: 8px;
  }

  .upload-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
}
</style>